<template>
    <div class="home-four-palace">

        <div class="home-four-palace-box">
            <ul class="home-four-palace-line1 box-line">
                <li class="box-item">
                    <div class="title">
                        <h3>{{ listData1[0].titleConfig.title }}</h3>
                        <p class="timeout">
                            <span>{{ listData1[0].activityInfo.homeDescribe }}</span>
                            <em><van-count-down :time="listData1[0].activityInfo.endTime * 1000 - new Date().getTime() + listData1[0].activityInfo.surplusTime" /></em>
                        </p>
                    </div>
                    <p class="sub-title">{{ listData1[0].titleConfig.subTitle }}</p>
                    <div class="item-list" v-for="(cell, i) in listData1[0].skuInfo" :key="i">
                        <img :src="cell.images" alt="">
                        <div class="item-list-content">
                            <h5>{{ cell.spuTitle }}</h5>
                            <p>
                                <strong>¥{{ cell.discountPrice  | toFix }}</strong>
                                <span>¥{{ cell.originalPrice | toFix }}</span>
                            </p>
                        </div>
                    </div>
                </li>
                <li class="box-item">
                    <div class="title">
                        <h3>{{ listData1[1].titleConfig.title }}</h3>
                        <p>{{ listData1[1].titleConfig.promotionTitle }}</p>
                    </div>
                    <p class="sub-title">{{ listData1[1].titleConfig.subTitle }}</p>
                    <div class="item-list" v-for="(cell, i) in listData1[1].skuInfo" :key="i">
                        <img :src="cell.images" alt="">
                        <div class="item-list-content">
                            <h5>{{ cell.spuTitle }}</h5>
                            <p>
                                <strong>¥{{ cell.discountPrice  | toFix }}</strong>
                                <span>¥{{ cell.originalPrice | toFix }}</span>
                            </p>
                        </div>
                    </div>
                </li>
            </ul>
            <ul class="home-four-palace-line2 box-line">
                <li
                    class="box-item"
                    v-for="item in listData2"
                    :key="item.uuid"
                >
                    <div class="title">
                        <h3>{{ item.titleConfig.title }}</h3>
                        <p v-if="item.titleConfig.promotionTitle">{{ item.titleConfig.promotionTitle }}</p>
                    </div>
                    <div class="item-list-wrap">
                        <div class="item-list" v-for="(cell, i) in item.skuInfo" :key="i">
                            <img :src="cell.images" alt="">
                            <div class="item-list-content">
                                <p>
                                    <strong>¥{{ cell.discountPrice  | toFix }}</strong>
                                    <span>¥{{ cell.originalPrice | toFix }}</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <ul class="home-four-palace-line3 box-line">
                <li
                    class="box-item"
                    v-for="item in listData3"
                    :key="item.uuid"
                >
                    <div class="title">
                        <h3>{{ item.titleConfig.title }}</h3>
                    </div>
                    <p v-if="item.titleConfig.promotionTitle" class="active-title">{{ item.titleConfig.promotionTitle }}</p>
                    <div class="item-list-wrap">
                        <div class="item-list" v-for="(cell, i) in item.skuInfo" :key="i">
                            <img :src="cell.images" alt="">
                            <div class="item-list-content">
                                <p>
                                    <strong>¥{{ cell.discountPrice  | toFix }}</strong>
                                    <span>¥{{ cell.originalPrice | toFix }}</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

    </div>
</template>

<script>
export default {
    name: 'homeFourPalace',
    props: ['fourPalaceData'],
    data () {
        return {
            listData1: null,
            listData2: null,
            listData3: null,
            time: 0
        }
    },
    created () {
        // console.log(this.fourPalaceData)
        this.listData1 = this.fourPalaceData[0].floor
        this.listData2 = this.fourPalaceData[1].floor
        this.listData3 = this.fourPalaceData[2].floor
    }
}
</script>

<style lang="scss">
.home-four-palace {
    padding: 12px;
    .home-four-palace-box {
        border: 1px solid #e1e1e1;
        border-radius: 7px;
        overflow: hidden;
        .box-line {
            .box-item {
                border-right: 1px solid #e1e1e1;
                border-bottom: 1px solid #e1e1e1;
                box-sizing: border-box;
                &:last-child {
                    border-right: none;
                }
            }
            &:last-child {
                .box-item {
                    border-bottom: none;
                }
            }
        }
    }
    .home-four-palace-line1 {
        display: flex;
        .box-item {
            // flex: 1;
            // flex-grow: 1;
            // flex-shrink: 1;
            width: 50%;
            padding: 10px;
            &:nth-of-type(1) .title p.timeout {
                display: flex;
                border: 1px solid #c73734;
                border-radius: 5px;
                width: 94px;
                span {
                    color: #fff;
                    background-color: #c73734;
                    width: 44px;
                    font-weight: bold;
                }
                em .van-count-down{
                    color: #be292c;
                    font-size: 10px;
                    line-height: 19px;
                    width: 50px;
                    font-weight: bold;
                }
            }
            .title {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-bottom: 5px;
                h3 {
                    font-size: 14px;
                    color: #333;
                }
                p {
                    font-size: 10px;
                    width: 60px;
                    height: 19px;
                    box-sizing: border-box;
                    background-color: #fff;
                    border: 1px solid #88c43e;
                    color: #88c43e;
                    text-align: center;
                    line-height: 19px;
                    border-radius: 5px;
                }
            }
            .sub-title {
                font-size: 10px;
                color: #999;
                padding-bottom: 10px;
            }
            .item-list {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                img {
                    width: 75px;
                    height: 75px;
                }
                .item-list-content {
                    flex: 1;
                    padding: 5px 0;
                    h5 {
                        font-size: 10px;
                        line-height: 12px;
                    }
                    p {
                        font-size: 9px;
                        margin-top: 5px;
                        font-weight: bold;
                        strong {
                            color: #c73734;
                        }
                        span {
                            color: #999;
                            text-decoration: line-through;
                            margin-left: 5px;
                        }
                    }
                }
            }
        }
    }
    .home-four-palace-line2 {
        display: flex;
        .box-item {
            // flex: 1;
            width: 50%;
            padding: 10px 0;
            box-sizing: border-box;
            .title {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 12px 5px;
                h3 {
                    font-size: 14px;
                    color: #333;
                }
                p {
                    font-size: 10px;
                    width: 60px;
                    height: 19px;
                    box-sizing: border-box;
                    background-color: #fff;
                    border: 1px solid #88c43e;
                    color: #88c43e;
                    text-align: center;
                    line-height: 19px;
                    border-radius: 5px;
                }
            }
            .item-list-wrap {
                display: flex;
                justify-content: space-around;
                .item-list {
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: center;
                    img {
                        width: 75px;
                        height: 75px;
                    }
                    .item-list-content {
                        flex: 1;
                        padding: 5px 0;
                        p {
                            font-size: 9px;
                            margin-top: 5px;
                            font-weight: bold;
                            strong {
                                color: #c73734;
                            }
                            span {
                                color: #999;
                                text-decoration: line-through;
                                margin-left: 5px;
                            }
                        }
                    }
                }
            }
        }
    }
    .home-four-palace-line3 {
        display: flex;
        justify-content: space-around;
        .box-item {
            &:nth-of-type(2) .active-title {
                border-color: #dc4542;
                color: #dc4542;
            }
            &:nth-of-type(3) .active-title {
                border-color: #4a70ef;
                color: #4a70ef;
            }
            &:nth-of-type(4) .active-title {
                border-color: #fe981e;
                color: #fe981e;
            }
            padding: 10px 0;
            flex: 1;
            border-right: none;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            .title {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-bottom: 5px;
                h3 {
                    font-size: 14px;
                    color: #333;
                }
            }
            .active-title {
                font-size: 10px;
                width: 60px;
                height: 19px;
                box-sizing: border-box;
                background-color: #fff;
                border: 1px solid #88c43e;
                color: #88c43e;
                text-align: center;
                line-height: 19px;
                border-radius: 5px;
                padding-bottom: 5px;
            }
            .item-list-wrap {
                display: flex;
                .item-list {
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: center;
                    img {
                        width: 75px;
                        height: 75px;
                    }
                    .item-list-content {
                        flex: 1;
                        padding: 5px 0;
                        p {
                            font-size: 9px;
                            margin-top: 5px;
                            font-weight: bold;
                            strong {
                                color: #c73734;
                            }
                            span {
                                color: #999;
                                text-decoration: line-through;
                                margin-left: 5px;
                            }
                        }
                    }
                }
            }
        }
    }
}

</style>
